<template>
	<view class="">
		<view class="goods-list" v-for="(item, index) in listData" :key="index" @click="toNavigate(item)">
			<view class="goods-list__box">
				<image class="goods-list__box__image" :src="item.recPic" mode="widthFix"></image>
				<view class="goods-list__box__right">
					<view class="goods-list__box__top">
						<view class="goods-list__box__title">{{ item.name }}</view>
					</view>
					<view class="goods-list__box__bot" style="margin-top: 15rpx;">规格：30斤/件</view>
					<view style="display: flex;align-items: center;margin-top: 15rpx;">
						<view class="goods-list__box__bot">规格：30斤/件</view>
						<view class="goods-list__box__bot" style="margin-left: 23rpx;">规格：30斤/件</view>
					</view>
				</view>
			</view>
			<view class="item-price">￥233.00</view>
			<view class="item-but">
				<view class="look-detail">
					确认信息
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: 'goodsList',
		props: {
			listData: {
				type: [Array],
				default: []
			},
			type: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {}
		},
		methods: {
			// 商品详情
			toNavigate(item) {
				if (this.type === 0) {
					uni.navigateTo({
						url: '/pages/submitSort/index?id=' + item.goodsId
					})
				} else {
					uni.navigateTo({
						url: '/pages/sortdetail/index?goodsId=' + item.goodsId
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.goods-list {
		margin-top: 31rpx;
		width: 688rpx;
		padding: 23rpx;
		background-color: #FFFFFF;
		border-radius: 19rpx;
		box-sizing: border-box;
		position: relative;

		.item-price {
			color: #E93325;
			font-size: 28rpx;
			font-weight: 500;
			position: absolute;
			top: 23rpx;
			right: 23rpx;
		}

		.goods-list__box {

			display: flex;

			.goods-list__box__image {
				width: 192rpx;
				height: 192rpx;
				border-radius: 12rpx;
				flex-shrink: 0;
			}

			.goods-list__box__right {
				flex: 1;
				margin-left: 15rpx;
				display: flex;
				flex-direction: column;
			}

			.goods-list__box__top {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.goods-list__box__title {

				width: 300rpx;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.goods-list__box__bot {
				color: #999999;
				font-size: 23rpx;
			}




		}

		.item-but {
			display: flex;
			margin-top: 15rpx;
			justify-content: flex-end;
		}

		.look-detail {
			width: 162rpx;
			height: 58rpx;
			background: #2FCC71;
			border-radius: 29rpx;
			font-size: 23rpx;
			font-weight: bold;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>